<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-test>hello Vue</div>
        <div v-test="{bg:'blue'}">hello world</div>
    </div>
    <script>

        // Vue.directive("test",(el,binding,vnode)=>{
        //     console.log(el)//<div>hello Vue</div> 当前绑定元素
        //     console.log(binding.value)//可以通过当前指令传参
        //     console.log(vnode.context)//可以取到当前实例的this

        // })

        //指令函数简写

        Vue.directive("test",(el,binding,vnode)=>{
            console.log(binding.value)  // {bg:'blue'}参数
            el.style.cssText="width:200px;height:200px;background:yellow;position:absolute";//样式
            el.style.background=binding.value?binding.value.bg:"red";//三元
            el.onmousedown=function(e){
                var disX=e.clientX-el.offsetLeft;
                var disY=e.clientY-el.offsetTop;

                document.onmousemove=function(e){
                    el.style.left=e.clientX-disX+"px";
                    el.style.top=e.clientY-disY+"px";
                }
            }
            document.onmouseup=function(){
                document.onmousemove=null;
            }
        });
    new Vue({
            el: "#app",
            data: {
            },
            mounted() {
                // Vue对对象增加,监听失败
                // console.log(this.info);
                // this.info.sex="男";
                // console.log(this.info);
                // this.$set(obj,key,val)
                this.$set(this.info, "sex", "男");
            },
            methods: {
                add() {}
            }

        })

    </script>
    
</body>
</html>